<<<<<<< HEAD
import { useEffect } from 'react';
import { IRouteComponentProps ,PageModelState,useDispatch ,useSelector ,ArticleModelState} from "umi";

// const map:{[key:string]:string} ={
//     'msgboard':'2c1794cc-10d8-4d48-adda-7ff02371aee8',
//     'about':'8f3973e9-4ed4-4849-ad85-b7d3b8093623'
// }



const Page: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {

  const dispatch = useDispatch();
  const { pageItem, pageCommentList, articleRecomment } = useSelector((state: { article: ArticleModelState, page: PageModelState }) => ({ ...state.article, ...state.page }))

  useEffect(() => {
    // 获取页面详情
    // dispatch({
    //   type: 'page/getPageViews',
    //   payload: id
    // })
    // // 获取评论列表
    // dispatch({
    //   type: 'page/getPageComment',
    //   payload: id
    // })
    // 获取推荐列表
    dispatch({
      type: 'article/getArticleRecommend'
    })
  }, [])

  return <div className="_10wT67E6AAzqcEqLI7jUbZ">

    <div className='_3GUiOO804xme2-agc9WfvC'>
      {/* 文章内容 */}
      <h2>
        <div><img src='https://wipi.oss-cn-shanghai.aliyuncs.com/2020-04-04/despaired-2261021_1280.jpg' alt="" /></div>
      </h2>


      <div className='markdown'>
        {/* <h2> */}
          <div dangerouslySetInnerHTML={{ __html: pageItem.html }}></div>
        {/* </h2> */}

      </div>

      <div>
        <p className='commit'>评论</p>
      </div>

      <div className='_3E53JQDjSQhUYjr-yCJTky'>
        {/* 评论 */}
        <div className='box'>
          {pageCommentList.map(item => {
            return <li key={item.id}>
              <header>
                <p className='_3xprCsLyoqZkArtvYiuAJU' style={{ fontWeight: ' bolder' }}>{item.name}</p>
              </header>

              <main style={{ 'padding': '12px 0px 12px 40px' }}>
                <div>
                  <p className='due7dhiendjec'>{item.content}</p>
                  <p className='active'>{item.userAgent}{ ' · 6个月前 回复'}</p>
                </div>

              </main>


            </li>
          })}
        </div>
      </div>



      {/* 推荐文章 */}
      <div className='_3ZUDOCREZiU7HtQwpEsqZZ'>
        <p className="_1hXJ8FkJwAyuM2-YNk-KH8">推荐阅读</p>

        <div className='_13a0ieTbw4mPlAdNBWux3c'>
          <div className='ammbB8tpRTlzwGu9Q8GNE'>
            <div className='ILwjOWV5UwcJFf9ezqGA0'>
              <div className='_2D8ED0giWo1nndxIezP9QV'>
                {articleRecomment.map(item => {
                  return <li key={item.id} style={{ 'opacity': 1 }} >

                    <header>
                      <a href="" className='_1IGTo-a5f9XSMJzXpuwVLp'>{item.title}</a>
                      <div className="FQiYOEaWTwMrtdNTVxicQ">
                        <div className="ant-divider ant-divider-vertical" role="separator"></div>
                        <span className="_2Mkgs6voFLMQqzoODDiOee"></span>
                        <div className="ant-divider ant-divider-vertical" role="separator"></div>
                        <span className="_2Mkgs6voFLMQqzoODDiOee">LeeCode</span></div>
                    </header>

                    <main>
                      <div className='_1pOcxenLy4i0bdMwF_z7Pp'>
                        <img className='img' src={item.cover} alt="" style={{ 'width': '482px', 'height': '160px' }} />
                      </div>

                      <div className='_3PsE-Wu3HdzQ7gDzVt-Ym2'>
                        <div className='_1a1sLsWPcIiIOw3Zw2i3it'>
                          <p>{item.summary}</p>
                        </div>


                        <div className="KKzJyhKAimSvVUzx_qeZY">
                            <span>
                              <span role="img" aria-label="heart" className="anticon anticon-heart">
                                <svg viewBox="64 64 896 896" focusable="false" data-icon="heart" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                  <path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"></path>
                                </svg>
                              </span><span className="_1lythm_jbjMURtN-zieAom">{item.likes}</span>
                            </span>


                            <span className="ElyAw9QkgByDAuselHsq">·</span>

                            <span>
                              <span role="img" aria-label="eye" className="anticon anticon-eye"><svg viewBox="64 64 896 896" focusable="false" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                <path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path>
                              </svg></span>
                              <span className="_1lythm_jbjMURtN-zieAom">371</span>
                            </span>
                            
                            <span className="ElyAw9QkgByDAuselHsq">·</span>
                            <span>
                                <span>
                                  <span role="img" aria-label="share-alt" className="anticon anticon-share-alt">
                                    <svg viewBox="64 64 896 896" focusable="false" data-icon="share-alt" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                      <path d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 000-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z"></path>
                                    </svg>
                                  </span>

                                  <span className="_1lythm_jbjMURtN-zieAom">分享</span>

                                </span>
                            </span>
                          </div>

                      </div>

                    </main>

                  </li>
                })}
              </div>

            </div>

          </div>


=======
import { useEffect } from "react";
import './msgboard.less'
import { ArticleModelState, CommentModelState, IRouteComponentProps, NavLink, PageModelState, useDispatch, useSelector } from "umi";
import '../../less/article.less'

const Msgboard: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {

  const { pageItem, articleRecomment, CommentItem } = useSelector((state: { page: PageModelState, article: ArticleModelState, comment: CommentModelState }) => ({ ...state.page, ...state.article, ...state.comment }))
  let dispatch = useDispatch()

  console.log(pageItem);

  useEffect(() => {
    dispatch({
      type: 'page/getPageView',
      payload: '2c1794cc-10d8-4d48-adda-7ff02371aee8'
    })
    dispatch({
      type: 'article/getArticleRecommend'

    })
    dispatch({
      type: 'comment/getArticleCommentList',
      payload: '2c1794cc-10d8-4d48-adda-7ff02371aee8'
    })
  }, [])
  return (
    <div className="msgboard">
      <div className="markdowm">
        <div className="top">
          <div dangerouslySetInnerHTML={{ __html: pageItem.html }}></div>
        </div>
        <div className="button">
          <p>评论</p>
          <div className="msgboard_pl">
            {
              CommentItem.map(item => {
                return <div key={item.id} className='msgboard_list'>
                  <div className="msgboard_wrap">
                    <header>
                      {
                        item.name
                      }
                    </header>
                    <main>
                      {
                        item.content
                      }
                    </main>
                    <footer>
                      {
                        item.userAgent
                      }
                    </footer>
                  </div>
                </div>
              })
            }
          </div>
        </div>
        <div >
          <main className="msgboard_main">
            {
              articleRecomment.map(item => {
                return <div key={item.id} className="list">
                  <NavLink to={`/article/${item.id}`}>
                    <header>
                      <div className='font'>{item.title}</div>
                      <div>6个月前</div>
                      <div>{item.category.label}</div>
                    </header>
                  </NavLink>
                  <NavLink to={`/article/${item.id}`}>
                    <main>
                      <div className='articleImg'>
                        <img src={item.cover} alt="" />
                      </div>
                      <div className='listPage'>
                        <div className='listTitle'>{item.summary}</div>
                        <div>
                          <span>
                            <span role="img" aria-label="heart" className="anticon anticon-heart">
                              <svg viewBox="64 64 896 896" focusable="false" data-icon="heart" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"></path></svg></span>
                            <span >0</span></span><span
                            >·</span><span>
                            <span role="img" aria-label="eye" className="anticon anticon-eye"><svg viewBox="64 64 896 896" focusable="false" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg></span>
                            <span >259</span></span>
                          <span>·</span>
                          <span><span><span role="img" aria-label="share-alt" >分享</span></span></span></div>
                      </div>
                    </main>
                  </NavLink>
                </div>
              })
            }
          </main>
>>>>>>> 4057b067d38055bcb75e968c4cffaf239cf58cb5
        </div>

      </div>

<<<<<<< HEAD

    </div>
  </div>

};

export default Page;
=======
    </div>
  );
}
export default Msgboard
>>>>>>> 4057b067d38055bcb75e968c4cffaf239cf58cb5
